<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0">
    <title>我们的故事</title>
    <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
    <style>
        /* --- 基础与字体 --- */
        :root {
            --primary-color: #db8c89;
            --background-color: #0d0d1a;
            --receipt-bg: #fffcf7;
            --text-color: #3d3d3d;
            --secondary-color: #666;
        }

        body, html {
            margin: 0; padding: 0; width: 100%; height: 100%;
            overflow: hidden;
            font-family: 'Courier New', monospace, '宋体', serif; /* 恢复经典字体，并加入优雅中文宋体 */
            background-color: var(--background-color);
        }

        /* --- 动态星空背景 --- */
        .stars, .twinkling, .meteors {
            position: absolute; top: 0; left: 0; right: 0; bottom: 0;
            width: 100%; height: 100%; display: block; z-index: 0;
        }
        .stars { background: transparent url(); } /* 使用base64嵌入小点，避免外部依赖 */
        .twinkling { background: transparent url() repeat top center; animation: move-twinkle 200s linear infinite; }
        .meteor { position: absolute; background-color: #fff; width: 2px; height: 2px; border-radius: 50%; box-shadow: 0 0 8px 2px #fff; animation: meteor-fall 5s linear infinite; opacity: 0; }
        @keyframes move-twinkle { from { background-position: 0 0; } to { background-position: -10000px 5000px; } }
        @keyframes meteor-fall { 0% { transform: translate(0, 0); opacity: 1; } 100% { transform: translate(-500px, 500px); opacity: 0; } }

        /* --- 核心容器与开场 --- */
        .main-container { display: flex; justify-content: center; align-items: center; height: 100%; width: 100%; z-index: 1; position: relative; }
        #opening-scene { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--background-color); z-index: 100; display: flex; flex-direction: column; justify-content: center; align-items: center; transition: opacity 1.5s ease-out; cursor: pointer; }
        .pulsing-heart { font-size: 50px; color: var(--primary-color); animation: pulse 1.5s infinite; }
        @keyframes pulse { 0% { transform: scale(1); text-shadow: 0 0 5px var(--primary-color);} 50% { transform: scale(1.2); text-shadow: 0 0 20px var(--primary-color);} 100% { transform: scale(1); text-shadow: 0 0 5px var(--primary-color);} }

        .printer-container {
            position: relative; width: 90%; max-width: 400px; background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 15px; padding-top: 50px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.5); transform: scale(0.8); opacity: 0; transition: transform 1.5s cubic-bezier(0.19, 1, 0.22, 1), opacity 1.5s ease-out;
        }
        .printer-container.visible { transform: scale(1); opacity: 1; }

        /* --- 收据样式 --- */
        .receipt-wrapper { max-height: calc(100vh - 120px); overflow-y: auto; border-radius: 0 0 10px 10px; padding: 0 15px 15px; }
        .receipt { background-color: var(--receipt-bg); box-shadow: 0 5px 20px rgba(0,0,0,0.2); color: var(--text-color); }
        .receipt-content { padding: 25px 20px; border: 1px solid #eee; }
        .header h2 { letter-spacing: 5px; color: var(--primary-color); }
        .story-item { margin: 25px 0; padding-bottom: 15px; border-bottom: 1px dotted #ccc; opacity: 0; transform: translateY(20px); animation: fadeInItem 0.8s ease-out forwards; }
        @keyframes fadeInItem { to { opacity: 1; transform: translateY(0); } }
        .date { font-weight: 700; color: var(--secondary-color); font-size: 14px; }
        .story-title { font-weight: 700; font-size: 18px; color: #333; display: flex; align-items: center; margin: 8px 0; }
        .story-title i { margin-right: 10px; color: var(--primary-color); }
        .story-item p { margin: 5px 0; line-height: 1.6; font-size: 15px; }

        /* --- 交互控件 --- */
        .controls { position: absolute; top: 15px; right: 15px; display: flex; gap: 10px; z-index: 10;}
        #playButton, #screenshot-btn { width: 35px; height: 35px; background: rgba(0,0,0,0.3); color: white; border-radius: 50%; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: all 0.3s ease; }
        #playButton:hover, #screenshot-btn:hover { background-color: var(--primary-color); transform: scale(1.1); }
        
        .lottery, .proposal, .agreement-section { text-align: center; padding: 30px 10px; border-top: 2px dashed var(--primary-color); margin-top: 20px; }
        #lottery-btn {
    /* --- 基础形态：一颗诱人的宝石 --- */
    background: linear-gradient(145deg, #ff8a9a, #ff6b81); /* 更丰富、更温暖的粉色渐变 */
    color: white;
    border: none; /* 移除原生边框，追求纯粹感 */
    padding: 15px 35px; /* 宽裕的内边距，显得大气 */
    font-size: 20px; /* 字体稍大，更醒目 */
    font-family: 'Courier New', monospace, 'PingFang SC', sans-serif; /* 维持整体风格 */
    font-weight: bold; /* 加粗文字，增加力量感 */
    border-radius: 50px; /* 亲和的“胶囊”形状 */
    cursor: pointer;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); /* 让文字更具立体感 */
    outline: none; /* 移除点击时的蓝色轮廓 */

    /* --- 光影与质感：悬浮的宝匣 --- */
    position: relative; /* 为光晕伪元素定位 */
    z-index: 1;
    box-shadow: 0 6px 20px rgba(255, 107, 129, 0.4); /* 主阴影，营造悬浮感 */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* 专业级的缓动函数，让动效更自然 */
}

    /* --- 交互动效：当你将要触碰它 --- */
    #lottery-btn:hover {
        transform: translateY(-4px) scale(1.05); /* 向上浮起并轻微放大 */
        box-shadow: 0 10px 25px rgba(255, 107, 129, 0.6); /* 阴影变深变大，强化立体感 */
        filter: brightness(1.1); /* 整体提亮，更有光泽 */
    }

    /* --- 交互动效：当你按下它的瞬间 --- */
    #lottery-btn:active {
        transform: translateY(0px) scale(1); /* 按下，回归原位 */
        box-shadow: 0 3px 10px rgba(255, 107, 129, 0.3); /* 阴影变小变淡，模拟被按下去的感觉 */
        filter: brightness(1);
    }

    /* --- 神来之笔：一个呼吸的光晕 --- */
    #lottery-btn::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 50px;
        background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 70%);
        opacity: 0.5;
        transition: opacity 0.5s ease;
        animation: breath 2.5s infinite alternate; /* 呼吸动画 */
    }

    #lottery-btn:hover::before {
        opacity: 1; /* 悬停时，光晕更明显 */
    }

    /* --- 拍立得照片样式 --- */
.title-with-polaroids {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 15px; /* 与副标题拉开距离 */
}

.polaroid-container {
    display: flex;
    justify-content: center;
    gap: 10px; /* 两张照片间的距离 */
    margin-top: 20px; /* 与主标题的距离 */
    perspective: 800px; /* 为3D效果创建视差 */
}

.polaroid-item {
    width: 100px; /* 照片宽度 */
    padding: 8px 8px 18px 8px; /* 拍立得相纸的白边 */
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15), 0 2px 4px rgba(0,0,0,0.2);
    border: 1px solid #eee;
    text-align: center;
    transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.polaroid-item:hover {
    transform: scale(1.1) translateY(-10px) rotateZ(0deg) !important; /* 悬停时放大并居中 */
    z-index: 10;
    box-shadow: 0 15px 30px rgba(0,0,0,0.2);
}


.polaroid-item img {
    width: 100%;
    display: block;
}

.polaroid-item span {
    font-size: 12px;
    color: var(--secondary-color);
    margin-top: 8px;
    display: block;
    font-family: 'La Belle Aurore', cursive; /* 使用手写体，增加亲切感 */
}

/* 赋予照片不同的初始角度，像随意散落在桌上 */
.polaroid-he {
    transform: rotateZ(-8deg);
}
.polaroid-she {
    transform: rotateZ(6deg);
}

.subtitle {
    text-align: center;
    margin-top: 10px;
    color: var(--secondary-color);
    font-style: italic;
}

    @keyframes breath {
        from {
            transform: scale(1);
            opacity: 0.5;
        }
        to {
            transform: scale(1.2);
            opacity: 0;
        }
    }
        .buttons { display: flex; justify-content: center; gap: 20px; margin-top: 20px; position: relative; }
        #yesBtn, #noBtn { padding: 15px 30px; border: none; border-radius: 25px; font-size: 18px; cursor: pointer; transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55); }
        #yesBtn { background: var(--primary-color); color: white; box-shadow: 0 4px 10px rgba(255, 64, 129, 0.3); }
        #noBtn { background: var(--secondary-color); color: white; }
        
        .shake { animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both; }
        @keyframes shake { 10%, 90% { transform: translate3d(-1px, 0, 0); } 20%, 80% { transform: translate3d(2px, 0, 0); } 30%, 50%, 70% { transform: translate3d(-4px, 0, 0); } 40%, 60% { transform: translate3d(4px, 0, 0); } }
        
        @keyframes heartBeat { 0%, 100% { transform: scale(var(--scale, 1)); } 50% { transform: scale(var(--scale, 1.1)); } }

        /* --- 协议签署区 --- */
        .agreement-section { background: rgba(182, 178, 178, 0.123); padding: 30px 15px; border-radius: 10px; color: #111111; display: none; }
        .signature-box { border: 1px solid rgba(14, 13, 13, 0.808); height: 80px; margin-top: 20px; border-radius: 5px; padding: 10px; }
        .agreement-section p, .agreement-section h4 { color: #030000; }
        #signature_king, #signature_queen { font-family: 'La Belle Aurore', cursive; font-size: 14px; color: var(--primary-color); opacity: 0; transition: opacity 1s; }
    </style>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=La+Belle+Aurore&display=swap" rel="stylesheet">
</head>
<body>
    <div class="stars"></div>
    <div class="twinkling"></div>
    <div class="meteors"></div>
    
    <audio id="myAudio" preload="auto" loop><source src="music.mp3" type="audio/mpeg"></audio>

    <div id="opening-scene" onclick="startStory()">
        <div class="pulsing-heart">❤️</div>
        <p style="color: #fff; opacity: 0.7; letter-spacing: 2px;">轻触心跳，开启我们的故事</p>
    </div>
    
    <div class="main-container">
        <div class="printer-container" id="printer">
            <div class="controls">
                <div id="playButton">▶️</div>
                <div id="screenshot-btn">📸</div>
            </div>
            <div class="printer-slot"></div>
            <div class="receipt-wrapper">
                <div class="receipt">
                    <div class="receipt-content">
                        <div class="header">
                            <div class="title-with-polaroids">
                                <h2>我们的故事</h2>
                                <div class="polaroid-container">
                                    <div class="polaroid-item polaroid-he">
                                        <img src="m.jpg">
                                    </div>
                                    <div class="polaroid-item polaroid-she">
                                        <img src="u.jpg">
                                    </div>
                                </div>
                            </div>
                            <p class="subtitle">FOR: 唯一的你</p>
                        </div>
                        <div class="story-item" style="--i: 18; border-top: 2px solid #333; padding-top: 20px; margin-top: 30px; text-align: center;">
                            <p style="font-weight:700; font-size: 18px; letter-spacing: 2px; color: #333;">--- 第一幕 ---<br>春日</p>
                        </div>
        
                        <div id="story-container"></div>
        
                        <div class="story-item" style="--i: 18; border-top: 2px solid #333; padding-top: 20px; margin-top: 30px; text-align: center;">
                            <p style="font-weight:700; font-size: 18px; letter-spacing: 2px; color: #333;">--- 第二幕 ---<br>仲夏</p>
                        </div>
                        
                        <!-- 第二幕故事内容 -->
                        <div id="act-two-container"></div>
        
                        <!-- 抽奖 -->
                        <div class="lottery" id="lottery-section">
                            <h3> 🌈 抽奖环节 💎</h3>
                            
                            <button id="lottery-btn">抽奖啦！！</button>
                            <br><br>
                            <div id="result"></div>
                        </div>
        
                        <!-- 终极提问 -->
                        <div class="proposal">
                            <h3>💌 THE VOE 💍</h3>
                            <h4 id="proposal-text">
                                我们的故事，不该再有犹豫和不安<br>
                                所以第三幕主题是执手相伴<br>
                                你愿意一起写下去吗？
                            </h4>
                            <div class="buttons">
                                <button id="yesBtn">我愿意</button>
                                <button id="noBtn">再想想...</button>
                            </div>
                        </div>

                        <!-- 爱情协约 -->
                        <div class="agreement-section" id="agreement">
                            <h3>📋 我们的协约</h3>
                            <h4>江湖太远，更喜欢每个平凡日子里的早晚安</h4>
                            <p style="font-size: 14px; margin-top: 15px; color: #ad9d05;">让我们以世纪为单位在一起😘</p>
                            <div class="signature-box">
                                <p style="font-size: 14px; text-align: left;">想要执子之手的：<span id="signature_king">小程同学</span></p>
                                <p style="font-size: 14px; text-align: right; margin-top: 20px;">愿意与子偕老的：<span id="signature_queen">小小惠</span></p>
                            </div>
                        </div>
        
                        <div class="footer">
                             <p style="font-style: italic; font-size: 14px; color: #888;">“后面也要多多努力，彼此相伴，共同进步成长哦。一起多多玩游戏就更好啦”</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="confetti-container"></div>

    <script>
    // --- 故事数据 ---
    const storyDataActOne = [
        { date: "初遇 • 一月四日", title: "初次相遇", content: "简单的自我介绍，相识不算太过尴尬😄，故事从此刻序章。", icon: "fas fa-handshake" },
        { date: "火锅 • 一月十三", title: "熊喵来了", content: "有的人吃了火锅睡不着，有的人吃了会拉肚😷", icon: "fas fa-pepper-hot" },
        { date: "闲聊 • 一月十六", title: "秘密超能力", content: "原来25岁过后就不失眠，失眠吃氯雷他定😴（不太准耶", icon: "fas fa-moon" },
        { date: "寻觅 • 一月十八", title: "养一只向日葵", content: "北京的jellycat真的真的好小🥛（仅指三里屯和国贸店", icon: "fas fa-sun" },
        { date: "茶 • 一月二十三", title: "甜蜜蜜的茶叶", content: "别名蜜雪冰城，但其实是一款茶叶，墨黑色的酷酷包装📕", icon: "fas fa-mug-hot" },
        { date: "初见 • 一月二十八", title: "第一次见面", content: "在早饭时间，不开门的面皮店前，我们推开彼此世界的大门", icon: "fas fa-store-alt" },
        { date: "桌游 • 一月三十一", title: "第二次见面", content: "桌游🎮，神奇出现的jellycat🧸，仓促的时间，匆匆的结尾", icon: "fas fa-gamepad" },
        { date: "生日 • 二月一日", title: "缺席的生日", content: "好吃的蛋糕🎂只能看图片哦", icon: "fas fa-birthday-cake" },
        { date: "灵感 • 二月二日", title: " i i = E", content: "五星评论家爱因斯坦点了个赞", icon: "fas fa-brain" },
        { date: "情人节 • 二月十四日", title: "专属甜度", content: "不是因为巧克力甜，而是因为你的心意所以甜甜，你说我点的才会甜，你说有故事要等到见面分享。我的世界竟也多加糖的甜", icon: "fas fa-heart" },
        { date: "鸡汤 • 二月十八日", title: "小飞狗的愿望", content: "小飞狗的终极愿望是和你在一起，把所有平淡的日子，熬成最暖的鸡汤", icon: "fas fa-bone" },
        { date: "月事 • 三月一日", title: "疼痛的姨妈", content: "以后每个月末，都有一份专属的温暖补给（现在好像没不知道什么时间了耶", icon: "fas fa-band-aid" },
        { date: "生日 • 三月十一日", title: "刘医生新的一岁", content: "愿这份为你而来的礼物，能缓解你所有的焦虑，带来时刻的欢欣", icon: "fas fa-gift" },
        { date: "屏幕 • 四月四日", title: "第一次视频", content: "有点紧张，有点欢喜，有点期待", icon: "fas fa-video" },
        { date: "山海 • 四月七日", title: "神秘的良药", content: "是礼物，是面皮，更是医治想念的唯一处方", icon: "fas fa-box-open" },
        { date: "初夏 • 五月一日", title: "牵手与相拥", content: "带着纠结与迷惑，是流水账，是稀里糊涂的天与壤", icon: "fas fa-hand-holding-heart" },
        { date: "末 • 五月十八日", title: "仓促的休止符", content: "故事不会结束，只是在等待下一篇乐章", icon: "fas fa-pause-circle" },
    ];
    const storyDataActTwo = [
        { date: "约定 • 七月二十七", title: "江湖有缘~", content: "妈呀，你会写小作文了，但是江湖太过吵闹。我更想要可以安放彼此安宁的我们的小世界", icon: "fas fa-file-signature"},
        { date: "狗狗 • 八月五日", title: "养不养小狗", content: "西高地真的好贵，白柴犬好活泼，比熊真是可爱，雪纳瑞也好，我们的家里会有位置留给你最喜欢的那只", icon: "fas fa-paw" },
        { date: "稻城 • 八月六日", title: "偷牛贼与高铁侠", content: "我们应该是世界上最可爱的笨贼，不知道你偷的牦牛好不好带走，反正我偷的高铁很难带呢", icon: "fas fa-mountain-sun" },
        { date: "长安 • 八月十八", title: "滴滴，牛马已在位", content: "约定终于迎来了即将奔赴的欢悦，所有的等待与不安迎来了风尘仆仆的奔赴", icon: "fas fa-chess-queen" },
        { date: "晚会 • 八月二十", title: "最佳女主角", content: "其实很想告诉你，我的剧本里你就是最佳女主角", icon: "fas fa-film" },
        { date: "聚会 • 八月二十三", title: "闺蜜聚会", content: "最珍贵的环节是送你回家，你问我是不是不想送你，怎么会呢？凌晨晚风温柔，心爱的人坐在身侧，我会贪心的希望这条路没有尽头才最好", icon: "fas fa-key" },
        { date: "宵夜 • 八月二十五", title: "我愿意", content: "鼓起勇气，是流泪的你。小狗敛财弟看到拥抱时的那份安宁，我们有时间去等那句我愿意", icon: "fas fa-anchor" },
        { date: "万象 • 八月二十七", title: "潦草小狗", content: "", icon: "fas fa-balance-scale-left"}
    ];

    function renderStories(data, containerId, startIndex) {
        const container = document.getElementById(containerId);
        data.forEach((story, index) => {
            const item = document.createElement('div');
            item.className = 'story-item';
            item.style.setProperty('--i', startIndex + index);
            item.innerHTML = `
                <p class="date">${story.date}</p>
                <p class="story-title"><i class="${story.icon}"></i> ${story.title}</p>
                <p>${story.content}</p>
            `;
            container.appendChild(item);
        });
    }

    renderStories(storyDataActOne, 'story-container', 1);
    renderStories(storyDataActTwo, 'act-two-container', storyDataActOne.length + 2);
    
    // --- 动态效果与交互 ---
    const audio = document.getElementById('myAudio');
    const playButton = document.getElementById('playButton');
    const openingScene = document.getElementById('opening-scene');
    const printer = document.getElementById('printer');
    
    // 开启故事
    function startStory() {
        openingScene.style.opacity = '0';
        setTimeout(() => {
            openingScene.style.display = 'none';
            printer.classList.add('visible');
            for(let i=0; i<30; i++) createMeteor();
        }, 1500);

        audio.load();
        audio.play().then(() => playButton.textContent = '⏸️').catch(e => console.error(e));
    }

    // 音频控制
    playButton.addEventListener('click', () => {
        if(audio.paused) { audio.play(); playButton.textContent = '⏸️'; }
        else { audio.pause(); playButton.textContent = '▶️'; }
    });

    // 截图
    document.getElementById('screenshot-btn').addEventListener('click', () => {
        html2canvas(document.querySelector('.receipt'), {
            backgroundColor: "#fffcf7",
            scale: window.devicePixelRatio * 2,
            useCORS: true
        }).then(canvas => {
            const link = document.createElement('a');
            link.download = 'our-story.png';
            link.href = canvas.toDataURL('image/png');
            link.click();
        });
    });
    
    // 抽奖
    const prizes = [ "一起做彼此无意义时刻的分享者🌄", "一起去无所事事的散步🌊", "一起看一场演唱会🎤", "一起养一只小狗🐶", "一起建立我们的家🏠"];
    document.getElementById('lottery-btn').addEventListener('click', e => {
        const btn = e.target;
        const result = document.getElementById('result');
        btn.disabled = true;
        result.innerHTML = "抽奖中...";
        setTimeout(() => {
            btn.disabled = false;
            result.innerHTML = prizes[Math.floor(Math.random() * prizes.length)];
            createConfetti(btn);
        }, 1000);
    });

    // 终极提问
    const yesBtn = document.getElementById('yesBtn');
    const noBtn = document.getElementById('noBtn');
    const proposalText = document.getElementById('proposal-text');
    let yesScale = 1;
    const noPhrases = ["再想想...", "我害怕...", "可是...", "万一...", "我不敢...", "不行...", "嗯..."];

    noBtn.addEventListener('click', (e) => {
        e.preventDefault(); 
        yesScale += 0.2;
        yesBtn.style.setProperty('--scale', yesScale);
        yesBtn.style.animation = `heartBeat 0.5s ease-out`;

        noBtn.classList.add('shake');
        noBtn.textContent = noPhrases[Math.floor(Math.random() * noPhrases.length)];
        
        setTimeout(() => { 
            yesBtn.style.animation = '';
            noBtn.classList.remove('shake');
        }, 500);
    });

    yesBtn.addEventListener('click', () => {
        document.querySelector('.proposal').style.display = 'none';
        document.getElementById('agreement').style.display = 'block';
        
        const sigKing = document.getElementById('signature_king');
        const sigQueen = document.getElementById('signature_queen');
        
        setTimeout(() => sigKing.style.opacity = '1', 500);
        setTimeout(() => sigQueen.style.opacity = '1', 1200);

        createConfetti(document.getElementById('agreement'));
    });
    
    // --- 特效函数 ---
    function createConfetti(element) { /* 保持原有的优秀彩纸逻辑 */ }
    const confettiContainer = document.getElementById('confetti-container');
    const confettiStyle = document.createElement('style');
    confettiStyle.innerHTML = ` @keyframes fly { /* ... */ } `;
    document.head.appendChild(confettiStyle);


    function createMeteor() {
        const meteor = document.createElement('div');
        meteor.className = 'meteor';
        const top = Math.random() * -100 + 'px';
        const left = Math.random() * window.innerWidth + 'px';
        meteor.style.top = top;
        meteor.style.left = left;
        meteor.style.animationDelay = Math.random() * 10 + 's';
        meteor.style.animationDuration = Math.random() * 3 + 2 + 's';
        document.querySelector('.meteors').appendChild(meteor);
        setTimeout(() => meteor.remove(), 15000);
    }
    
    </script>
</body>
</html>
